<template>
  <div class="menu-bar-container">
    <!-- logo -->
    <div class="logo" :style="{'background-color':themeColor}" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'" @click="$router.push('/')">
      <img v-if="collapse" src="@/assets/logo.png"/><div>{{collapse?'':appName}}</div>
    </div>
    <!-- 导航菜单 -->
    <el-menu default-active="1" :class="collapse?'menu-bar-collapse-width':'menu-bar-width'" @open="handleopen" @close="handleclose"
             @select="handleSelect" :collapse="collapse">
      <menu-tree v-for="item in navTree" :key="item.id" :menu="item"></menu-tree>
    </el-menu>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex'
import ElMenu from 'element-ui/packages/menu/src/menu'
import MenuTree from '@/components/MenuTree'

export default {
  components: {ElMenu,MenuTree},
  data() {
    return {
    };
  },
  methods: {
    handleopen() {
      console.log('handleopen');
      console.info(this.navTree);
    },
    handleclose() {
      console.log('handleclose');
    },
    handleSelect() {
      console.log('handleSelect');
    },
    //加载导航菜单
    findMenuTree() {
      this.$api.menu.findMenuTree()
        .then( (res) => {
          this.$store.commit('setNavTree', res.data)
          //添加动态路由
          // let routes = this.addDynamicMenuRoutes(res.data)
          // for(var i=0; i< routes.length; i++) {
          //   this.$router.options.routers[0].children.push(routes[i])
          // }
          // this.$router.addRoutes(this.$router.options.routes)
        })
        .catch(function (res) {
          alert(res);
        })
    }
  },
  computed: {
    ...mapState({
      appName: state => state.app.appName,
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse,
      navTree: state => state.menu.navTree
    })
  },
  mounted() {
  }
};
</script>
<style scoped lang="scss">
  .menu-bar-container {
    .el-menu {
      position:absolute;
      top: 60px;
      bottom: 0px;
      text-align: left;
    }
    .logo {
      position: absolute;
      top: 0px;
      height: 60px;
      line-height: 60px;
      background: #4b5f6e;
      img {
        width: 40px;
        height: 40px;
        border-radius: 0px;
        margin: 10px 10px 10px 10px;
        float: left;
      }
      div {
        font-size: 22px;
        color: white;
        text-align: left;
      }
    }
    .menu-bar-width {
      width: 200px;
    }
    .menu-bar-collapse-width {
      width: 65px;
    }
  }
</style>
